/**
 * 车辆管理中的订单记录
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Tcar' }">车辆管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="pagination1" class="user-search">
      <el-form-item >
        <el-input size="medium" v-model="pagination1.orderno" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.licName" placeholder="车牌号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="pagination1.daterange" type="daterange" 
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input size="medium" v-model="pagination1.orderStatus" placeholder="订单状态"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="selAllOrSelByLike">查询</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="OrderRecordList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column  prop="orderno" label="订单编号"  show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="commitTime" label="提交时间"  show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="licName" label="车牌号码"  show-overflow-tooltip>
      </el-table-column>
      <el-table-column  prop="orderMoney" label="订单金额"  show-overflow-tooltip>
         <template slot-scope="scope">
            <span>¥{{format(scope.row.orderMoney)}}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="orderStatus" label="订单状态"  show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 0">已支付</span>
          <span v-if="scope.row.orderStatus == 1">未支付</span>
          <span v-if="scope.row.orderStatus == 2">未确认</span>
          <span v-if="scope.row.orderStatus == 3">进行中</span>
          <span v-if="scope.row.orderStatus == 4">申诉中</span>
          <span v-if="scope.row.orderStatus == 5">已退款</span>
        </template>
      </el-table-column>
      <el-table-column  prop="payType" label="支付方式"  show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.payType == 1">微信</span>
          <span v-if="scope.row.payType == 2">支付宝</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination1.currentPage"
      :page-sizes="pagination2.pageSizes"
      :page-size="pagination1.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination2.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      OrderRecordList:[],
      loading: false, //是显示加载
      pagination1:{
        carId:"",
        pageSize:5,
        currentPage:1,
        orderno:"",//订单流水号
        licName:"",//车牌号
        daterange:[],//时间范围
        orderStatus:"",//订单状态
      },
      pagination2:{
        total:0,
        pageSizes:[5,10,20,50,100]
      }
    }
  },
  methods: {
    selAllOrSelByLike() {
      this.$axios.post("/orderItems/sel",this.pagination1)
      .then(res=>{
        this.OrderRecordList = res.data.data.OrderRecordList;
        this.pagination2.total = res.data.data.total;
      })
      .catch(error=>{
        console.log(error.data);
      })
    },
    handleSizeChange(val){
      this.pagination1.pageSize = val;
      this.pagination1.currentPage = 1;
      this.selAllOrSelByLike();
    },
    handleCurrentChange(val){
      this.pagination1.currentPage = val;
      this.selAllOrSelByLike();
    },
    format(val){
        let realVal = parseFloat(val).toFixed(2);
        return realVal;
    }
    
  },  
  created(){
    this.pagination1.carId = this.$route.query.carId;
    this.selAllOrSelByLike();
  }

 
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
</style>

 
 

 